<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true">
                <el-form-item>
                    <el-button @click="reload" icon="el-icon-arrow-left" circle></el-button>
                </el-form-item>
                <div style="margin-left: 105px; margin-top: -47px;" >
                    <div >
                        <el-radio-group v-model="SelectData.type">
                            <el-radio :label="1">单选题</el-radio>
                            <el-radio :label="2">多选题</el-radio>
                            <el-radio :label="3">判断题</el-radio>
                            <el-radio :label="4">填空题</el-radio>
                            <el-radio :label="5">简答题</el-radio>
                            <el-radio :label="6">程序设计题</el-radio>
                        </el-radio-group>
                    </div>
                    <div  style="margin-top:20px">
                        <el-radio-group  v-model="SelectData.level">
                            <el-radio :label="1">简单题</el-radio>
                            <el-radio :label="2">中等题</el-radio>
                            <el-radio :label="3">困难题</el-radio>
                        </el-radio-group>
                    </div>
                    <div>
                        <div class="block" >
                        </div>
                        <div class="block" style="margin-top: 10px">
                <span class="demonstration">知识点：
              <el-cascader
                      :options="kpointdatalist"
                      :show-all-levels="false"
                      :props="defaultProps"
                      v-model="SelectData.kpointId"
              ></el-cascader>
                </span>
                        </div>
                        <div  style="margin-top: -42px;margin-left: 300px;">
                            <el-button type="primary" icon="el-icon-sold-out" style="margin-left: 20px" @click="SearchEx">筛选题目</el-button>
                            <el-button type="primary" icon="el-icon-refresh" style="margin-left: 20px" @click="SearchClear">重置</el-button>
                        </div>
                    </div>
                </div>
                <el-form-item style="float:right">
                    <el-button type="primary" @click="showAdd" icon="el-icon-plus">新增题目</el-button>
                </el-form-item>
                <el-form-item style="float:right">
                    <el-upload action="/api/exercise/addBatch"  name="file" :on-success="onSuccess" :on-error="onError" :data="{courseid:this.courseid}">
                        <el-button type="primary" icon="el-icon-circle-plus-outline">批量导入</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
        </el-col>

        <!--//题目渲染-->
        <div :data="exerciseList" >
            <ol>
                <li  v-if="item.exerciseInfo.type=='1'" v-for="item in  exerciseList">
                    <span>单选题：</span> {{ item.choice.content}}
                    <div> <span>A</span> {{item.choice.labela}}</div>
                    <div> <span>B</span> {{item.choice.labelb}}</div>
                    <div> <span>C</span> {{item.choice.labelc}}</div>
                    <div> <span>D</span> {{item.choice.labeld}}</div>
                    <div style="margin-top: 10px ;font-weight: bold" > <span>正确答案</span> {{item.choice.answer}}</div>
                    <div style="margin-top: 10px"><span>答案解析：</span>{{item.choice.comment}}</div>
                    <div style="float: right;">
                        <el-button size="mini" icon="el-icon-search" @click="Kpointtree(item.exerciseInfo.id)">知识点树</el-button>
                        <el-button size="mini" icon="el-icon-edit" @click="edit(item.exerciseInfo,item.choice)">编辑</el-button>
                    </div>
                    <hr style="margin-top: 40px">
                </li>
                <li  v-if="item.exerciseInfo.type=='2'" v-for="item in  exerciseList">
                    <span>多选题:</span>{{ item.choice.content}}
                    <div> <span>A</span> {{item.choice.labela}}</div>
                    <div> <span>B</span> {{item.choice.labelb}}</div>
                    <div> <span>C</span> {{item.choice.labelc}}</div>
                    <div> <span>D</span> {{item.choice.labeld}}</div>
                    <div v-if="item.choice.labele ==null"> <span>E</span> {{item.choice.labele}}</div>
                    <div v-if="item.choice.labelf ==null"> <span>F</span> {{item.choice.labelf}}</div>
                    <div style="margin-top: 10px;font-weight: bold"> <span>正确答案：</span> {{item.choice.answer}}</div>
                    <div style="margin-top: 10px"><span>答案解析：</span>{{item.choice.comment}}</div>
                    <div style="float: right;">
                        <el-button size="mini" icon="el-icon-search" @click="Kpointtree(item.exerciseInfo.id)">知识点树</el-button>
                        <el-button size="mini" icon="el-icon-edit" @click="edit(item.exerciseInfo,item.choice)">编辑</el-button>
                    </div>
                    <hr style="margin-top: 40px">
                </li>
                <li  v-if="item.exerciseInfo.type=='3'" v-for="item in  exerciseList">
                    <span>判断题：</span>{{ item.trueFalse.content}}
                    <div style="margin-top: 10px;font-weight: bold" v-if="item.trueFalse.answer==1"> <span>正确答案：</span> 正确</div>
                    <div style="margin-top: 10px;font-weight: bold" v-if="item.trueFalse.answer==2"> <span>正确答案：</span> 错误</div>
                    <div style="margin-top: 10px"><span>答案解析：</span>{{item.trueFalse.comment}}</div>
                    <div style="float: right;">
                        <el-button size="mini" icon="el-icon-search" @click="Kpointtree(item.exerciseInfo.id)">知识点树</el-button>
                        <el-button size="mini" icon="el-icon-edit" @click="edit(item.exerciseInfo,item.trueFalse)">编辑</el-button>
                    </div>
                    <hr style="margin-top: 40px">
                </li>
                <li  v-if="item.exerciseInfo.type=='4'" v-for="item in  exerciseList">
                    <span>填空题：</span>{{ item.completion.content}}
                    <div style="margin-top: 10px;font-weight: bold" > <span>正确答案：</span> {{item.completion.answerArray}}</div>
                    <div style="margin-top: 10px" ><span>答案解析：</span>{{item.completion.comment}}</div>
                    <div style="float: right;">
                        <el-button size="mini" icon="el-icon-search" @click="Kpointtree(item.exerciseInfo.id)">知识点树</el-button>
                        <el-button size="mini" icon="el-icon-edit" @click="edit(item.exerciseInfo,item.completion)">编辑</el-button>
                    </div>
                    <hr style="margin-top: 40px">
                </li>
                <li  v-if="item.exerciseInfo.type=='5'" v-for="item in  exerciseList">
                    <span>简答题：</span>{{ item.shortAnswer.content}}
                    <div style="margin-top: 10px;font-weight: bold" > <span>正确答案：</span> {{item.shortAnswer.answer}}</div>
                    <div style="margin-top: 10px" ><span>答案解析：</span>{{item.shortAnswer.comment}}</div>
                    <div style="float: right;">
                        <el-button size="mini" icon="el-icon-search" @click="Kpointtree(item.exerciseInfo.id)">知识点树</el-button>
                        <el-button size="mini" icon="el-icon-edit" @click="edit(item.exerciseInfo,item.shortAnswer)">编辑</el-button>
                    </div>
                    <hr style="margin-top: 40px">
                </li>
                <li  v-if="item.exerciseInfo.type=='6'" v-for="item in  exerciseList">
                    <span>程序设计题：</span>{{ item.programming.content}}
                    <div style="margin-top: 10px;font-weight: bold"  > <span>正确答案：</span> {{item.programming.answer}}</div>
                    <div style="margin-top: 10px"  ><span>答案解析：</span>{{item.programming.comment}}</div>
                    <div style="float: right;">
                        <el-button size="mini" icon="el-icon-search" @click="Kpointtree(item.exerciseInfo.id)">知识点树</el-button>
                        <el-button size="mini" icon="el-icon-edit"  @click="edit(item.exerciseInfo,item.programming)" >编辑</el-button>
                    </div>
                    <hr style="margin-top: 40px">
                </li>
            </ol>
        </div>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
        <el-pagination layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="pageSizes"
        :page-size="pageSize" :total="total" style="float:right;">
        </el-pagination>
        </el-col>

        <!--新增题目界面-->
        <el-dialog :title="formTitle" :visible.sync="formVisible" :close-on-click-modal="false">
            <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
                <div>
                    <el-radio-group v-model="formData.exerciseInfo.type">
                        <el-radio :label="1">单选题</el-radio>
                        <el-radio :label="2">多选题</el-radio>
                        <el-radio :label="3">判断题</el-radio>
                        <el-radio :label="4">填空题</el-radio>
                        <el-radio :label="5">简答题</el-radio>
                        <el-radio :label="6">程序设计题</el-radio>
                    </el-radio-group>
                </div>
                <div style="margin-top: 30px">
                    <el-radio-group v-model="formData.exerciseInfo.dlevel">
                        <el-radio :label="1">简单题</el-radio>
                        <el-radio :label="2">中等题</el-radio>
                        <el-radio :label="3">困难题</el-radio>
                    </el-radio-group>
                </div>
            </el-form>
            <div v-if="formData.exerciseInfo.type == '1'" >
                <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
                    <div style="margin-top: 30px">
                        题干
                        <!--<el-input-->
                                <!--type="textarea"-->
                                <!--:rows="5"-->
                                <!--placeholder="请输入题干"-->
                                <!--v-model="formData.choice.content">-->
                        <!--</el-input>-->
                        <textarea id="editor" rows="10" cols="80"></textarea>
                    </div>
                    <div style="margin-top: 30px">
                        A选项内容
                        <el-input v-model="formData.choice.labelA" placeholder="请输入A标识"></el-input>
                        B选项内容
                        <el-input v-model="formData.choice.labelB" placeholder="请输入B标识"></el-input>
                        C选项内容
                        <el-input v-model="formData.choice.labelC" placeholder="请输入C标识"></el-input>
                        D选项内容
                        <el-input v-model="formData.choice.labelD" placeholder="请输入D标识"></el-input>
                    </div>
                    <div style="margin-top: 30px">
                        正确答案
                        <el-radio-group v-model="formData.choice.answer">
                            <el-radio label="A">A</el-radio>
                            <el-radio label="B">B</el-radio>
                            <el-radio label="C">C</el-radio>
                            <el-radio label="D">D</el-radio>
                        </el-radio-group>
                    </div>

                    <div style="margin-top: 30px">
                        答案说明
                        <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="请输入答案说明"
                                v-model="formData.choice.comment">
                        </el-input>
                    </div>
                </el-form>
            </div>
            <div v-else-if="formData.exerciseInfo.type == '2'">
                <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
                    <div style="margin-top: 30px">
                        题干
                        <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="请输入题干"
                                v-model="formData.choice.content">
                        </el-input>
                    </div>
                    <div style="margin-top: 30px">
                        A选项内容
                        <el-input v-model="formData.choice.labelA" placeholder="请输入A标识"></el-input>
                        B选项内容
                        <el-input v-model="formData.choice.labelB" placeholder="请输入B标识"></el-input>
                        C选项内容
                        <el-input v-model="formData.choice.labelC" placeholder="请输入C标识"></el-input>
                        D选项内容
                        <el-input v-model="formData.choice.labelD" placeholder="请输入D标识"></el-input>
                        E选项内容
                        <el-input v-model="formData.choice.labelE" placeholder="请输入E标识"></el-input>
                        F选项内容
                        <el-input v-model="formData.choice.labelF" placeholder="请输入F标识"></el-input>
                    </div>
                    <div style="margin-top: 30px">
                        正确答案
                        <el-checkbox-group v-model="formData.choice.answer">
                            <el-checkbox label="A"></el-checkbox>
                            <el-checkbox label="B"></el-checkbox>
                            <el-checkbox label="C"></el-checkbox>
                            <el-checkbox label="D"></el-checkbox>
                            <el-checkbox label="E"></el-checkbox>
                            <el-checkbox label="F"></el-checkbox>
                        </el-checkbox-group>

                    </div>

                    <div style="margin-top: 30px">
                        答案说明
                        <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="请输入答案说明"
                                v-model="formData.choice.comment">
                        </el-input>
                    </div>
                </el-form>
            </div>
            <div v-else-if="formData.exerciseInfo.type == '3'">
                <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
                    <div style="margin-top: 30px">
                        题干
                        <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="请输入题干"
                                v-model="formData.trueFalse.content">
                        </el-input>
                    </div>
                    <div style="margin-top: 30px">
                        正确答案
                        <el-radio-group v-model="formData.trueFalse.answer">
                            <el-radio :label="-1">错</el-radio>
                            <el-radio :label="1">对</el-radio>
                        </el-radio-group>
                    </div>
                    <div style="margin-top: 30px">
                        答案说明
                        <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="答案说明"
                                v-model="formData.trueFalse.comment">
                        </el-input>
                    </div>
                </el-form>
            </div>
            <div v-else-if="formData.exerciseInfo.type == '4'">
                <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
                    <div style="margin-top: 30px">
                        题干
                        <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="请输入题干"
                                v-model="formData.completion.content">
                        </el-input>
                    </div>
                    <div style="margin-top: 30px">
                        第一空
                        <el-input v-model="formData.completion.answerArray[0]" placeholder="第一空"></el-input>
                        第二空
                        <el-input v-model="formData.completion.answerArray[1]" placeholder="第二空"></el-input>
                        第三空
                        <el-input v-model="formData.completion.answerArray[2]" placeholder="第三空"></el-input>
                        第四空
                        <el-input v-model="formData.completion.answerArray[3]" placeholder="第四空"></el-input>
                    </div>
                    <div style="margin-top: 30px">
                        答案说明
                        <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="请输入答案说明"
                                v-model="formData.completion.comment">
                        </el-input>
                    </div>
                </el-form>
            </div>
            <div v-else-if="formData.exerciseInfo.type == '5'">
                <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
                    <div style="margin-top: 30px">
                        题干
                        <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="请输入题干"
                                v-model="formData.shortAnswer.content">
                        </el-input>
                    </div>
                    <div style="margin-top: 30px">
                        答案
                        <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="请输入答案"
                                v-model="formData.shortAnswer.answer">
                        </el-input>
                    </div>
                    <div style="margin-top: 30px">
                        答案说明
                        <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="答案说明"
                                v-model="formData.shortAnswer.comment">
                        </el-input>
                    </div>
                </el-form>
            </div>
            <div v-else-if="formData.exerciseInfo.type == '6'">
                <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
                    <div style="margin-top: 30px">
                        题干
                        <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="请输入题干"
                                v-model="formData.programming.content">
                        </el-input>
                    </div>
                    <div style="margin-top: 30px">
                        答案
                        <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="请输入答案"
                                v-model="formData.programming.answer">
                        </el-input>
                    </div>
                    <div style="margin-top: 30px">
                        答案说明
                        <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="答案说明"
                                v-model="formData.programming.comment">
                        </el-input>
                    </div>
                </el-form>
            </div>
            <div v-else style="margin-top: 30px">
                **********************************请先选择题型**************************************
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="formVisible = false">取消</el-button>
                <el-button type="primary" @click.native="saveSubmit" :loading="submitLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--知识点树按钮-->
        <el-dialog :title="formTitle" :visible.sync="VisibleKptree" :close-on-click-modal="false">
            <p >{{konwpoint}}</p>
            <el-tree
                    :data="kpointdatalist"
                    show-checkbox
                    node-key="id"
                    ref="tree"
                    >
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="VisibleKptree = false">取消</el-button>
                <el-button type="primary"  :loading="submitLoading" @click="submitkpoint(formData.exerciseInfo.id)">保存</el-button>
            </div>
        </el-dialog>

        <!--编辑按钮-->
        <el-dialog :title="formTitle" :visible.sync="VisibleSingleChoice" :close-on-click-modal="false">
            <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
                <div style="margin-top: 30px">
                    题干
                    <el-input
                            type="textarea"
                            :rows="5"
                            placeholder="请输入题干"
                            v-model="formData.choice.content">
                    </el-input>
                </div>
                <div style="margin-top: 30px">
                    A选项内容
                    <el-input v-model="formData.choice.labela" placeholder="请输入A标识"></el-input>
                    B选项内容
                    <el-input v-model="formData.choice.labelb" placeholder="请输入B标识"></el-input>
                    C选项内容
                    <el-input v-model="formData.choice.labelc" placeholder="请输入C标识"></el-input>
                    D选项内容
                    <el-input v-model="formData.choice.labeld" placeholder="请输入D标识"></el-input>
                </div>
                <div style="margin-top: 30px">
                    正确答案
                    <el-radio-group v-model="formData.choice.answer">
                        <el-radio label="A">A</el-radio>
                        <el-radio label="B">B</el-radio>
                        <el-radio label="C">C</el-radio>
                        <el-radio label="D">D</el-radio>
                    </el-radio-group>
                </div>

                <div style="margin-top: 30px">
                    答案说明
                    <el-input
                            type="textarea"
                            :rows="5"
                            placeholder="请输入答案说明"
                            v-model="formData.choice.comment">
                    </el-input>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="VisibleSingleChoice = false">取消</el-button>
                <el-button type="primary" @click="editSubmit(formData.exerciseInfo)" :loading="submitLoading">提交</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="formTitle" :visible.sync="VisibleMultiChoice" :close-on-click-modal="false">

                <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
                    <div style="margin-top: 30px">
                        题干
                        <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="请输入题干"
                                v-model="formData.choice.content">
                        </el-input>
                    </div>
                    <div style="margin-top: 30px">
                        A选项内容
                        <el-input v-model="formData.choice.labela" placeholder="请输入A标识"></el-input>
                        B选项内容
                        <el-input v-model="formData.choice.labelb" placeholder="请输入B标识"></el-input>
                        C选项内容
                        <el-input v-model="formData.choice.labelc" placeholder="请输入C标识"></el-input>
                        D选项内容
                        <el-input v-model="formData.choice.labeld" placeholder="请输入D标识"></el-input>
                        E选项内容
                        <el-input v-model="formData.choice.labele"  placeholder="请输入E标识"></el-input>
                        F选项内容
                        <el-input v-model="formData.choice.labelf" placeholder="请输入F标识"></el-input>
                    </div>
                    <div style="margin-top: 30px" >
                        正确答案
                        <el-checkbox-group v-model="formData.choice.answer" >
                            <el-checkbox label="A"></el-checkbox>
                            <el-checkbox label="B"></el-checkbox>
                            <el-checkbox label="C"></el-checkbox>
                            <el-checkbox label="D"></el-checkbox>
                            <el-checkbox label="E"></el-checkbox>
                            <el-checkbox label="F"></el-checkbox>
                        </el-checkbox-group>

                    </div>

                    <div style="margin-top: 30px">
                        答案说明
                        <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="请输入答案说明"
                                v-model="formData.choice.comment">
                        </el-input>
                    </div>
                </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="VisibleMultiChoice = false">取消</el-button>
                <el-button type="primary" @click="editSubmit(formData.exerciseInfo)" :loading="submitLoading">提交</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="formTitle" :visible.sync="VisibleTrueFalse" :close-on-click-modal="false">
                     <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
                         <div style="margin-top: 30px">
                             题干
                             <el-input
                                     type="textarea"
                                     :rows="5"
                                     placeholder="请输入题干"
                                     v-model="formData.trueFalse.content">
                             </el-input>
                         </div>
                         <div style="margin-top: 30px">
                             正确答案
                             <el-radio-group v-model="formData.trueFalse.answer">
                                 <el-radio :label="-1">错</el-radio>
                                 <el-radio :label="1">对</el-radio>
                             </el-radio-group>
                         </div>
                         <div style="margin-top: 30px">
                             答案说明
                             <el-input
                                     type="textarea"
                                     :rows="5"
                                     placeholder="答案说明"
                                     v-model="formData.trueFalse.comment">
                             </el-input>
                         </div>
                     </el-form>

                 <div slot="footer" class="dialog-footer">
                     <el-button @click="VisibleTrueFalse = false">取消</el-button>
                     <el-button type="primary" @click="editSubmit(formData.exerciseInfo)" :loading="submitLoading">提交</el-button>
                 </div>
             </el-dialog>
        <el-dialog :title="formTitle" :visible.sync="VisibleCompletion" :close-on-click-modal="false">

                      <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
                          <div style="margin-top: 30px">
                              题干
                              <el-input
                                      type="textarea"
                                      :rows="5"
                                      placeholder="请输入题干"
                                      v-model="formData.completion.content">
                              </el-input>
                          </div>
                          <div style="margin-top: 30px">
                              第一空
                              <el-input v-model="formData.completion.answerArray[0]" placeholder="第一空"></el-input>
                              第二空
                              <el-input v-model="formData.completion.answerArray[1]" placeholder="第二空"></el-input>
                              第三空
                              <el-input v-model="formData.completion.answerArray[2]" placeholder="第三空"></el-input>
                              第四空
                              <el-input v-model="formData.completion.answerArray[3]" placeholder="第四空"></el-input>
                          </div>
                          <div style="margin-top: 30px">
                              答案说明
                              <el-input
                                      type="textarea"
                                      :rows="5"
                                      placeholder="请输入答案说明"
                                      v-model="formData.completion.comment">
                              </el-input>
                          </div>
                      </el-form>

                  <div slot="footer" class="dialog-footer">
                      <el-button @click="VisibleCompletion = false">取消</el-button>
                      <el-button type="primary" @click="editSubmit(formData.exerciseInfo)" :loading="submitLoading">提交</el-button>
                  </div>
              </el-dialog>
        <el-dialog :title="formTitle" :visible.sync="VisibleShortAnswer" :close-on-click-modal="false">

                      <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
                          <div style="margin-top: 30px">
                              题干
                              <el-input
                                      type="textarea"
                                      :rows="5"
                                      placeholder="请输入题干"
                                      v-model="formData.shortAnswer.content">
                              </el-input>
                          </div>
                          <div style="margin-top: 30px">
                              答案
                              <el-input
                                      type="textarea"
                                      :rows="5"
                                      placeholder="请输入答案"
                                      v-model="formData.shortAnswer.answer">
                              </el-input>
                          </div>
                          <div style="margin-top: 30px">
                              答案说明
                              <el-input
                                      type="textarea"
                                      :rows="5"
                                      placeholder="答案说明"
                                      v-model="formData.shortAnswer.comment">
                              </el-input>
                          </div>
                      </el-form>

                  <div slot="footer" class="dialog-footer">
                      <el-button @click="VisibleShortAnswer = false">取消</el-button>
                      <el-button type="primary" @click="editSubmit(formData.exerciseInfo)" :loading="submitLoading">提交</el-button>
                  </div>
              </el-dialog>
        <el-dialog :title="formTitle" :visible.sync="VisibleProgramming" :close-on-click-modal="false">

                      <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
                          <div style="margin-top: 30px">
                              题干
                              <el-input
                                      type="textarea"
                                      :rows="5"
                                      placeholder="请输入题干"
                                      v-model="formData.programming.content">
                              </el-input>
                          </div>
                          <div style="margin-top: 30px">
                              答案
                              <el-input
                                      type="textarea"
                                      :rows="5"
                                      placeholder="请输入答案"
                                      v-model="formData.programming.answer">
                              </el-input>
                          </div>
                          <div style="margin-top: 30px">
                              答案说明
                              <el-input
                                      type="textarea"
                                      :rows="5"
                                      placeholder="答案说明"
                                      v-model="formData.programming.comment">
                              </el-input>
                          </div>
                      </el-form>

                  <div slot="footer" class="dialog-footer">
                      <el-button @click="VisibleProgramming = false">取消</el-button>
                      <el-button type="primary" @click="editSubmit(formData.exerciseInfo)" :loading="submitLoading">提交</el-button>
                  </div>
              </el-dialog>
    </section>
</template>

<script>

    export default {
        data() {
            return {
                currentid:'',
                courseid: '',
                TFexercise: false,
                selectedCourseid: '',
                user: {},
                teacherid: "",
                konwpoint:'请选择知识点',
                filters: {
                    keyword: ''
                },
                SelectData:{
                    kpointId:[],
                    type:'',
                    level:'',
                },
                defaultProps: {
                    children: 'children',
                    label: 'name',
                    value:'id'
                },
                listLoading: false, //是否显示加载动画
                submitLoading: false,
                kpointdatalist:[],//知识点
                dataList: [], //数据列表(用户)
                exerciseList:{},
                total: 0,
                pageIndex: 1, //页码
                pageSize: this.CONSTANT.PAGE_SIZE, //分页大小
                pageSizes: this.CONSTANT.PAGE_SIZES, //分页大小选择列表
                sels: [],//列表选中列
                action: '', // 'add'-添加，'edit'-编辑，'detail'-详情
                formVisible: false, //界面是否显示
                VisibleSingleChoice:false,
                VisibleMultiChoice:false,
                VisibleTrueFalse:false,
                VisibleCompletion:false,
                VisibleShortAnswer:false,
                VisibleProgramming:false,
                VisibleKptree:false,
                formTitle: '', //界面标题
                formRules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    mobilephone: [{
                        validator: (rule, value, callback) => {

                            let reg = /^1[3|4|5|8][0-9]\d{4,8}$/;

                            if (reg.test(value) == false && value) {
                                callback(new Error("手机号格式不正确"));
                            }
                        }, trigger: 'blur'
                    }],
                    usertype: [{required: true, message: "请选择用户类别", trigger: 'blur'}]
                },

                //新增页面数据
                formData:{
                    exerciseInfo:{
                        type: '',
                        dlevel: '1',
                        courseid: this.$route.query.courseid,
                    },
                    choice: {
                        content: '',
                        answer: [],
                        comment: '',
                        labelA: '',
                        labelB: '',
                        labelC: '',
                        labelD: '',
                        labelE: '',
                        labelF: '',
                    },//选择题
                    trueFalse: {
                        content: '',
                        answer: '',
                        comment: '',
                    }, //判断题
                    shortAnswer: {
                        content: '',
                        answer: '',
                        comment: '',
                    },//简答题
                    completion: {
                        answerArray:[],
                        comment:'',
                        content:'',
                    },//填空题
                    programming: {
                        content: '',
                        answer: '',
                        comment: '',
                    },//程序设计题
                    kpointtree:{
                        exerinfoid:'',
                        kpointids:[],
                    }//知识点树
                },
            }
        },
        methods: {
            SearchEx(){
                let para = {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    courseid:this.courseid,
                    kpoints: this.SelectData.kpointId[1],
                    type:this.SelectData.type,
                    level:this.SelectData.level,

                };
                this.$http.post('/api/exercise/findByCondition',para).then((res)=>{
                    console.log(res.data.data);
                    this.exerciseList=res.data.data;
                }).catch((error)=>{
                })

            },
            SearchClear(){
                this.SelectData={
                    kpointId:[],
                    type:'',
                    level:'',
                }
            },
            edit(exerciseInfo,exercise){
                this.formData.preExercise = exercise;
                this.formData.preExerciseInfo = exerciseInfo;
                this.formData.exerciseInfo=Object.assign({},exerciseInfo);
                switch(this.formData.exerciseInfo.type){
                    case 1:
                        this.formData.choice=Object.assign({},exercise);
                        this.VisibleSingleChoice=true;
                        break;
                    case 2:
                        this.formData.choice=Object.assign({},exercise);
                        //转数组
                        let array=[];
                        var str=this.formData.choice.answer;
                        console.log(str);
                        var j=0;
                        for(var i=0 ;i<str.length;i++)
                        {
                            if(str[i]=='A') {
                                array[j]=str[i];
                                j++;
                            }
                            if(str[i]=='B') {
                                array[j]=str[i];
                                j++;
                            }
                            if(str[i]=='C') {
                                array[j]=str[i];
                                j++;
                            }
                            if(str[i]=='D') {
                                array[j]=str[i];
                                j++;
                            }
                            if(str[i]=='E') {
                                array[j]=str[i];
                                j++;
                            }
                            if(str[i]=='F') {
                                array[j]=str[i];
                                j++;
                            }
                        }
                        console.log(array);
                        this.VisibleMultiChoice=true;
                        this.formData.choice.answer=array;
                        break;
                    case 3:
                        this.formData.trueFalse=Object.assign({},exercise);
                        this.VisibleTrueFalse=true;
                        break;
                    case 4:
                        this.formData.completion=Object.assign({},exercise);
                        this.VisibleCompletion=true;
                        break;
                    case 5:
                        this.formData.shortAnswer=Object.assign({},exercise);
                        this.VisibleShortAnswer=true;
                        break;
                    case 6:
                        this.formData.programming=Object.assign({},exercise);
                        this.VisibleProgramming=true;
                        break;

                }
            },//编辑按钮
            Kpointtree(exerciseInfoid) {//知识点树已选显示
               // this.$refs.tree.setCheckedKeys();
                this.VisibleKptree = true;
                this.exerinfoid = exerciseInfoid;
                this.$http.get('api/exerkpoint/findByExerInfoId/'+this.exerinfoid).then(res=>{
                  this.kpointtree=res.data.data;
                    console.log(this.kpointtree);
                    this.kpointtree.kpointids = res.data.data.map(function (k) { return k.kpointid; });
                    console.log(this.kpointtree.kpointids);
                  this.$refs.tree.setCheckedKeys(this.kpointtree.kpointids);
                })
            },
            submitkpoint(exerciseInfoid){
                let currentpoints=this.$refs.tree.getCheckedKeys();
                console.log(currentpoints);
                exerciseInfoid=this.exerinfoid;
                console.log(this.exerinfoid);
                var kpointIds="";
                for(var i=0;i<currentpoints.length;i++){
                    kpointIds=kpointIds+currentpoints[i];
                    if(i!=currentpoints.length-1){
                        kpointIds+=",";
                    }
                }
                console.log(kpointIds);
                if(kpointIds==""||kpointIds==null)
                {
                    kpointIds = "N";
                }
                this.$http.get('/api/exerkpoint/addBatch/'+this.exerinfoid+'/'+kpointIds).then(res => {

                    console.log(res.data.code);
                    if (res.data.code==0) {
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        });
                        this.VisibleKptree = false;

                       // this.getDataList(); //重新加载数据
                    } else {
                        this.$message({
                            message: '提交失败',
                            type: 'error'
                        });
                    }
                }).catch((error) => {
                    if (error) console.log(error);
                });
            },//知识点批量导入
            handleReset() {
                this.filters.keyword = "";
                this.userState = "";
            },
            handleSizeChange(val) { //改变分页大小
                this.pageSize = val;
                this.getDataList();
            },
            handleCurrentChange(val) { //页码跳转
                this.pageIndex = val;
                this.getDataList();
            },
            getTeacherInfo() {
                this.user = JSON.parse(localStorage.getItem("CurrentUser"));//获取userid
                this.$http.get('/api/teacherinfo/findTeacherByUserid/' + this.user.id).then((res) => {
                    this.teacherid = res.data.teacherInfo.id;
                    this.getDataList();
                }).catch((error) => {
                });//查询teacherid
            },
            handleDel: function (index, row) { //删除
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    let para = {id: row.id};
                    this.$http.get('/api/user/remove/' + para.id).then((res) => {

                        if (res.data.code == 0) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                        this.getDataList();
                    });
                }).catch(() => {
                    if (error) console.log(error);
                });
            },
            showAdd: function () { //显示新增界面
                this.formVisible = true;
                this.formData1 = {
                    name: '',
                    creatorid: this.teacherid,

                };
                this.action = "add";
                this.formTitle = '导入例题';
            },
            onSuccess: function (response, file) {
                console.log(response);
                console.log("文件上传成功");
            },
            onError: function () {
                console.log("文件上传失败");
            },
            showEdit: function (index, row) { //显示编辑界面

                this.formVisible = true;
                this.formData = Object.assign({}, row);
                this.action = "edit";
                this.formTitle = '编辑';
            },
            saveSubmit: function () {
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    this.submitLoading = true;

                    let para = Object.assign({}, this.formData);
                    this.$http.post('/api/exercise/addOne', this.formData).then(res => {
                        this.submitLoading = false;
                        if (res.data.code == 0) {
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                            this.$refs['formData'].resetFields();
                            this.formVisible = false;
                            // this.getDataList(); //重新加载数据
                        } else {
                            this.$message({
                                message: '提交失败',
                                type: 'error'
                            });
                        }
                    }).catch((error) => {
                        this.submitLoading = false;
                        if (error) console.log(error);
                    });

                });
            },
            editSubmit: function (exericseinfo) {
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    // this.submitLoading = true;

                    let para = Object.assign({}, this.formData);
                    //转字符串
                    this.$http.post('/api/exercise/modify', this.formData).then(res => {

                        if (res.data.code == 0) {
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                            this.$refs['formData'].resetFields();
                            Object.assign(this.formData.preExerciseInfo,this.formData.exerciseInfo);
                            switch(this.formData.exerciseInfo.type){
                                case 1:
                                    this.VisibleSingleChoice=false;
                                    Object.assign(this.formData.preExercise,this.formData.choice);
                                    break;
                                case 2:
                                    this.VisibleMultiChoice=false;
                                    Object.assign(this.formData.preExercise,this.formData.choice);
                                    break;
                                case 3:
                                    this.VisibleTrueFalse=false;
                                    Object.assign(this.formData.preExercise,this.formData.trueFalse);
                                    break;
                                case 4:
                                    this.VisibleCompletion=false;
                                    Object.assign(this.formData.preExercise,this.formData.completion);
                                    break;
                                case 5:
                                    this.VisibleShortAnswer=false;
                                    Object.assign(this.formData.preExercise,this.formData.shortAnswer);
                                    break;
                                case 6:
                                    this.VisibleProgramming=false;
                                    Object.assign(this.formData.preExercise,this.formData.programming);
                                    break;
                            }

                            // this.getDataList(); //重新加载数据
                        } else {
                            this.$message({
                                message: '提交失败',
                                type: 'error'
                            });
                        }
                    }).catch((error) => {
                        this.submitLoading = false;
                        if (error) console.log(error);
                    });

                });
                this.submitLoading = false;
            },
            getkpointdatalist(){
                this.$http.get('api/kpoint/getKpointTree/'+this.courseid).then(res=>{
                    this.kpointdatalist=res.data.data;
                }).catch(error => {
                    console.log(error);
                })
            },
            getDataList() { //获取数据列表（用户）
                this.listLoading = true;
                let para = {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    keyword: this.filters.keyword,
                    courseid: this.courseid,
                };
                this.$http.post('/api/exercise/findByCondition',para).then((res)=>{
                    console.log(res.data.data);
                    this.exerciseList=res.data.data;
                    this.total = res.data.total;
                }).catch((error)=>{
                })
                // this.listLoading = true;
                // let para = {
                //     pageIndex: this.pageIndex,
                //     pageSize: this.pageSize,
                //     keyword: this.filters.keyword,
                //     teacherid: this.teacherid,
                // };
                // this.$http.post('/api/courseteacher/findByCondition', para).then(res => {
                //     this.listLoading = false;
                //     this.total = res.data.total;
                //     this.dataList = res.data.data;
                //     console.log(this.dataList);
                // }).catch((error) => {
                //     this.listLoading = false;
                //     if (error) console.log(error);
                // });
            },

            reload(){
                this.$router.push({path:"/courseManage"});
            }

        },
        mounted() {
            this.courseid = this.$route.query.courseid;
            this.getTeacherInfo();
            this.getkpointdatalist();
        }
    }
</script>
